<template>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        type="index"
        :index="indexAdd"
        label="序号"
        width="180">
    </el-table-column>
    <el-table-column
        label="歌曲"
        width="180">
      <template slot-scope="scope">
        <a @click="play(scope.row)" style="cursor: pointer">{{ scope.row.name }}</a>
      </template>
    </el-table-column>
    <el-table-column
        prop="artist"
        label="歌手">
    </el-table-column>
    <el-table-column
        prop="album"
        label="专辑">
    </el-table-column>
    <el-table-column
        prop="time"
        label="时长">
    </el-table-column>
  </el-table>
</template>

<script>
import axios from "axios";
import Evenbus from "../../../evenbus";

export default {
  name: "ranking_list",
  props: ["id"],
  data() {
    return {
      /* dialogVisible: false,*/
      tableData: [],
      currentPage: 1, // 当前页码
      /*total: 20, // 总条数*/
      pageSize: 10 // 每页的数据条数
    }
  },
  /*props传过来的值可以使用这个属性变得可以使用*/
  computed: {
    rankid() {
      return this.id;
    }
  },
  created() {
    let that = this;
    axios({
      method: 'post',
      url: 'http://localhost:8080/kuwo/GetRankData?id=93',
    }).then(function (res) {
      that.tableData = res.data
    })
  },
  methods: {

    play(data) {
      Evenbus.$emit("data", data)

    },
    /**
     * 序号按index来
     */
    indexAdd(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize
    }

  },
  watch: {
    rankid: function (val, oldVal) {
      let that = this;
      axios({
        method: 'post',
        url: 'http://localhost:8080/kuwo/GetRankData?id=' + val,
      }).then(function (res) {
        that.tableData = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>
